<template>
    <div class="scene-content">
        <div class="scene-container">
            <div class="title">瑞云渲染应用场景</div>
            <div class="scene-panel">
                <ul class="scene-menu">
                    <li v-for="(scene, index) in scenes" :key="scene.id" class="scene-item"
                        :class="{ active: index === activeIndex }" @mouseenter="activeIndex = index">
                        <div class="scene-item-icon">
                            <img :src="scene.svg" alt="">
                        </div>
                        <span class="scene-item-text">{{ scene.name }}</span>
                    </li>
                </ul>

                <div class="scene-preview">
                    <img class="scene-image" :src="currentScene.image" :alt="currentScene.name" />
                    <div class="scene-overlay">
                        <div class="caption-title">{{ currentScene.title }}</div>
                        <div class="scene-caption">
                            <div class="caption-desc">{{ currentScene.desc }}</div>
                            <div class="cta-section">
                                <el-button type="primary" class="try-button">
                                    立即渲图
                                    <el-icon class="ml-2">
                                        <ArrowRight />
                                    </el-icon>
                                </el-button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'

type Scene = {
    id: number
    name: string
    title: string
    desc: string
    image: string
    svg: string
}

const scenes = ref<Scene[]>([
    {
        id: 1,
        name: '建筑设计',
        title: '建筑设计',
        desc: '对于大型商业综合体、高层建筑群等规模庞大的项目，云渲染能够快速处理复杂的光影效果和大量材质细节，帮助建筑师和客户更快看到最终效果。',
        image: 'https://xuantu.renderbus.com/_next/static/media/SceneImage1.209f96c1.webp',
        svg: 'https://xuantu.renderbus.com/icons/architecture.svg'
    },
    {
        id: 2,
        name: '家装家居',
        title: '家装家居',
        desc: '快速渲染精美室内效果，精准匹配色彩材质，家居设计师利用渲染图展示产品在实际空间中的样子，包括尺寸、比例、材质质感，解决客户想象与实际效果差距，加速决策过程。',
        image: '	https://xuantu.renderbus.com/_next/static/media/SceneImage2.3203d959.webp',
        svg: 'https://xuantu.renderbus.com/icons/architecture.svg'
    },
    {
        id: 3,
        name: '景观设计',
        title: '景观设计',
        desc: '一键生成超逼真景观效果图，精准模拟光照、植物生长，有效解决设计沟通障碍，让复杂景观理念直观展现，加速方案审批与客户共识。',
        image: 'https://xuantu.renderbus.com/_next/static/media/SceneImage3.c406415a.webp',
        svg: 'https://xuantu.renderbus.com/icons/architecture.svg'
    },
    {
        id: 4,
        name: '产品展示',
        title: '产品展示',
        desc: '在产品设计过程中，设计师可能需要对多个设计方案进行快速迭代，云渲染服务能够迅速提供不同方案的渲染结果，加速决策过程。',
        image: 'https://xuantu.renderbus.com/_next/static/media/SceneImage4.6c277bb4.webp',
        svg: 'https://xuantu.renderbus.com/icons/architecture.svg'
    },
    {
        id: 5,
        name: '城市规划',
        title: '城市规划',
        desc: '城市规划项目往往涵盖广泛的地理区域和复杂的基础设施，云渲染能够在短时间内处理大量数据，生成详细的城市场景模拟。',
        image: 'https://xuantu.renderbus.com/_next/static/media/SceneImage5.6c379dd2.webp',
        svg: 'https://xuantu.renderbus.com/icons/architecture.svg'
    },
    {
        id: 6,
        name: '展厅设计',
        title: '展厅设计',
        desc: '一键打造沉浸式展陈空间。精准光照模拟与展品布局优化，让创意瞬间呈现。解决空间利用率与观众互动体验痛点，为展览策划提速增效，引领观展新潮流。',
        image: 'https://xuantu.renderbus.com/_next/static/media/SceneImage6.046411cc.webp',
        svg: 'https://xuantu.renderbus.com/icons/architecture.svg'
    },
    {
        id: 7,
        name: '广告与创意',
        title: '广告与创意',
        desc: '广告公司和创意机构利用云渲染快速制作广告宣传图、海报和数字媒体内容，实现创意的快速验证和市场投放。',
        image: '	https://xuantu.renderbus.com/_next/static/media/SceneImage7.0d017149.webp',
        svg: 'https://xuantu.renderbus.com/icons/architecture.svg'
    }
])

const activeIndex = ref(0)
const currentScene = computed(() => scenes.value[activeIndex.value])
</script>
<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

.scene-content {
    // background-image: url('https://image.lutongjiakao.com/system/db7689e04aac41f3b706a2560a5d9c00.jpg');
    // background-size: cover;
    // background-position: 100%;
    // background-repeat: no-repeat;
    background: linear-gradient(rgb(255, 255, 255) 1.56%, rgba(255, 255, 255, 0) 26.12%), linear-gradient(90deg, rgba(216, 245, 234, 0.6) 0%, rgba(241, 249, 253, 0.6) 51.84%, rgba(219, 240, 255, 0.6) 99.69%);
    height: rem(513);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scene-container {
    width: rem(910);
}

.title {
    text-align: center;
    color: #000;
    font-size: rem(24);
    font-weight: 700;
    margin-bottom: rem(40);
}

.scene-panel {
    display: grid;
    grid-template-columns: rem(122) 1fr;
}

.scene-menu {
    list-style: none;
    margin: 0;
    padding: rem(15) 0 rem(15) rem(10);
    display: flex;
    flex-direction: column;
    background: rgba(20, 20, 20, 0.4);
    border-radius: rem(12) 0 0 rem(12);
    row-gap: rem(20);
}

.scene-item {
    display: flex;
    align-items: center;
    gap: rem(10);
    height: rem(31);
    padding-left: rem(12);
    color: #fff;
    border-radius: rem(4);
    font-size: rem(12);
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background-color .2s ease, color .2s ease;
}

.scene-item:hover,
.scene-item.active {
    background: linear-gradient(90deg, rgba(20, 20, 20, 0.2) 0%, rgb(37, 207, 107) 100%);
    color: #fff;
}

.scene-item-icon {
    width: rem(18);
    height: rem(18);
}

.scene-preview {
    position: relative;
    overflow: hidden;
    border-radius: 0 rem(12) rem(12) 0;
    background: rgba(0, 0, 0, .45);
    width: 100%;
    height: 100%;
}

.scene-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scene-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: rem(30);
    color: #fff;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .7) 100%);
}

.scene-caption {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.caption-title {
    font-size: rem(18);
    font-weight: 700;
    margin-bottom: rem(8);
}

.caption-desc {
    font-size: rem(12);
    color: #ccd3df;
    width: 70%;
}

.action-btn {
    background: #2e65ff;
    border: none;
    height: rem(32);
    font-size: rem(12);
    border-radius: rem(20);
}

.cta-section {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .try-button {
        background: linear-gradient(90deg, rgb(15, 210, 183) 0%, rgb(37, 207, 107) 100%);
        border: none;
        border-radius: rem(25);
        width: rem(115);
        height: rem(32);
        font-size: rem(12);
        font-weight: 400;
        display: flex;
        align-items: center;

        .ml-2 {
            margin-left: rem(15);
        }

        &:hover {
            background: linear-gradient(90deg, rgb(37, 207, 107) 0%, rgb(15, 210, 183) 100%);
        }
    }
}
</style>